<template>
    <button @click="clearArtboard">清空画布</button>
    <div id="Canvas" style="height: 300px">
        <canvas id="canvas" class="canvas-wrap"></canvas>
    </div>
</template>

<script setup>
import { fabric } from "fabric";
import { Point, ColoredPoint } from './createClass';
import CustomizeArrow from './arrow';
import ScaleArrow from './ScaleArrow';

let canvas;
const clearArtboard = () => {
    if (canvas) {
        canvas.clear()
    }
}
nextTick(() => {
    var Canvas = document.querySelector("#Canvas");
    canvas = new fabric.Canvas("canvas", {
        selection: false  // 禁用整个画布的选择区域
    });
    canvas.setWidth(Canvas.clientWidth);
    canvas.setHeight(Canvas.clientHeight);
    // 测试自定义类Point
    const point = new Point(200, 300)
    // console.log(point, 'Point');
    // point子类ColoredPoint
    const coloredPoint = new ColoredPoint(15, 85, "#10ac845")
    // console.log(coloredPoint, 'ColoredPoint');
    // 渲染矩形文本类
    const labeledRect = new fabric.LabeledRect({
        width: 300,
        height: 50,
        left: 100,
        top: 100,
        label: 'test',
        fill: '#faa'
    })
    // 更改属性
    labeledRect.set({
        label: 'hello, 我是自定义labeledRect标签',
        fill: '#aaf',
        rx: 10,
        ry: 10
    })
    // console.log(fabric);
    // canvas.add(labeledRect)

    // 测试自定义箭头类
    let isDown = false;
    let arrow;
    canvas.on('mouse:down', function (evt) {
        isDown = true
        if (isDown) {
            const pointer = canvas.getPointer(evt.e)
            const points = [pointer.x, pointer.y, pointer.x, pointer.y]
            arrow = new CustomizeArrow(points, {
                stroke: 'red',
                fill: 'red',
                strokeWidth: 2,
                selectable: false,
                evented: false
            })
            // arrow = new fabric.ScaleArrow(points, {
            //     stroke: '#83B4FF',
            //     fill: '#FDFFE2',
            //     strokeWidth: 2,
            //     selectable: false,
            //     evented: false
            // })
            canvas.add(arrow)
            canvas.requestRenderAll();
        }
    })
    canvas.on('mouse:move', function (evt) {
        if (!isDown) return
        const pointer = canvas.getPointer(evt.e)
        arrow.set({
            x2: pointer.x,
            y2: pointer.y
        })
        arrow.setCoords();
        canvas.requestRenderAll();
    })

    // 监听鼠标抬起事件
    canvas.on('mouse:up', function (o) {
        isDown = false;
    });
});
</script>

<style lang="scss">
.canvas-wrap {
    border: 1px solid #272727;
    height: 40vh;
}

.path-mode {
    font-size: 14px;

    &__title {
        font-size: 14px;
    }

    &__item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 12px;

        .title {
            font-size: 14px;
            margin-right: 5px;
        }

        .path-size_value {
            padding-left: 5px;
            font-weight: bold;
        }

        .select-size {
            flex: 1;
        }

        input[type="color"] {
            // border: none;
            // background: none;
            // -webkit-appearance: none;
            // appearance: none;
            border-width: 0px;
            // border-style: none;
            outline: none;
            border-radius: 3px;
        }
    }
}
</style>
